<template>
	<view class="Box">
		<view class="headerBox">
			<view class="headerImgBox">
				<image src="https://hzdaoziji.oss-cn-hangzhou.aliyuncs.com/file57145428520348b9b2a2714c364f3ef8.jpg"
					class="headerImg">
				</image>
			</view>

			<view class="headerRight">
				<view class="title">
					“点墨成金，少年看古村”墨园研学路线方案
				</view>
				<view class="text">
					包含收费：8个热门景点，12个收费任务
				</view>
			</view>
		</view>
		<view class="lineTypeBox">
			<view class="text">自助亲朋行</view>
			<view class="PinyinBox">
				<view class="rightBox">
					<u-icon color="#fff" name="checkbox-mark" size="18"></u-icon>
				</view>
			</view>
		</view>
		<view class="NumberBox">
			<view class="NumberText">出行人数</view>
			<view class="NumberIcon">
				<view class="iconText" @click="numberEvent(1)">
					<view class="iconLeft">
						-
					</view>
				</view>
				<view class="iconCenter">
					{{numberValue}}
				</view>
				<view class="iconText iconTextTwo" @click="numberEvent(2)">
					<view class="iconRight">
						+
					</view>
				</view>
			</view>
		</view>

		<view class="TouristInformation">
			<view class="TouristInformation-1">
				<view class="TouristInformation-text">填写游客信息</view>
			</view>
			<view v-if="numberValue == 1" class="">
				<view class="formBox">
					<view class="formItem">
						<view class="itemLeft">
							姓名
						</view>
						<u--input v-model="name" border='none' placeholder="必填,输入游客姓名">
						</u--input>
					</view>
					<view class="formItem">
						<view class="itemLeft">
							身份证
						</view>
						<u--input v-model="idCard" :placeholder="placeholderText" border='none'>
						</u--input>
					</view>
					<view class="formItem">
						<view class="itemLeft">
							手机号
						</view>
						<u--input v-model="tel" :placeholder="phoneText" border='none'>
						</u--input>
					</view>
					<view v-if="lineType == 3" class="formItem">
						<view class="itemLeft">
							家长手机号
						</view>
						<u--input v-model="parentTel" :placeholder="ParentsText" border='none'>
						</u--input>
					</view>
				</view>
			</view>
			<view v-if="numberValue > 1" class="">
				<view class="quantity">
					需填
					<text>{{ numberValue }}</text>
					位
				</view>

				<view class="verticalLayout">
					<!-- 显示游客名 -->
					<view v-for="(item,index) in Visitor" :key="index" class="visitors">
						<view class="visitorsItem visitorsShow">
							<view class="itemName">
								{{ item.name }}
							</view>
							<view class="visitorsIcon" @click="VisitorIndex(index)">
								<u-icon color="#c5221f" name="close-circle-fill" size="16"></u-icon>
							</view>
						</view>
					</view>
					<!-- 新增游客 -->
					<view class="visitors">
						<view v-if="numberValue > Visitor.length" class="visitorsItem" @click="plainEvent">
							<view class="itemName">
								新增
							</view>
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				lineType: 5,
				numberValue: 1,
				Visitor: [],
				placeholderText: '输入游客身份证号',
				phoneText: '与家长手机号必填其中一个',
				ParentsText: '与手机号必填其中一个',
				name: '',
				tel: '',
				idCard: '',
				parentTel: '',
				telNum: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
			}
		},
		onLoad() {
			this.Visitor = []
			uni.setStorageSync("Visitor", this.Visitor);
			if (this.lineType == 3) {
				this.placeholderText = '必填,输入游客身份证号'
				this.phoneText = '输入手机号'
				this.ParentsText = '必填,请输入家长手机号'
			}

			if (this.lineType != 2 && this.lineType != 3) {
				this.phoneText = '必填,输入手机号'
			}
		},
		onShow() {
			this.Visitor = uni.getStorageSync("Visitor")
		},
		methods: {
			VisitorIndex(index) {
				this.Visitor.splice(index, 1)
			},
			numberEvent(data) {
				if (data == 1) {
					if (this.numberValue > 1) {
						this.numberValue -= 1
					}
				} else if (data == 2) {
					this.numberValue += 1
				}
			},
			plainEvent() {
				uni.setStorageSync("Visitor", this.Visitor);
				uni.navigateTo({
					url: '/pages/PopularRoute/fillIn?lineType=5'
				})
			},
		}
	}
</script>

<style lang="scss">
	@import "./strokeOrder.scss"
</style>